<template>
  <n-dropdown :options="dropdownOptions" @select="handleSelect">
    <n-space align="flex-end">
      <n-avatar round size="medium" :src="userAvatarURL" object-fit="fill" />
    </n-space>
  </n-dropdown>
</template>

<script lang="ts">
import { defineComponent, h, ref, computed, watchEffect } from 'vue'
import type { Component } from 'vue'
import { NIcon, NSpace } from 'naive-ui'
import { useAuthStore } from "@/stores/auth"
import type { User } from '@/api/User'
import {
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
  PersonCircleOutline as UserIcon,
  LogInOutline as LoginIcon,
  CreateOutline as RegisterIcon,
  ClipboardOutline as WorkbenchIcon
} from '@vicons/ionicons5'
import useNotification from "@/utils/notification"
const { notify } = useNotification()
import unLoginImage from '@/assets/image/unLogin.png'
import router from '@/router'

export default defineComponent({
  components: { NSpace },
  setup() {
    const authStore = useAuthStore()

    const user = ref<User | null>(authStore.user)
    const userAvatarURL = ref<string>(unLoginImage)

    const isUserLoggedIn = computed(() => authStore.checkLogin())
    const isAdmin = computed(() => {
      return user.value?.userRole === 'admin'
    })
    console.log("isUserLoggedIn.value:" + isUserLoggedIn.value)
    console.log("isAdmin.value:" + isAdmin.value)

    watchEffect(() => {
      if (isUserLoggedIn.value && authStore.state.user) {//getLoginUser()
        user.value = authStore.state.user//getLoginUser()
        userAvatarURL.value = user.value.userAvatar
      } else {
        user.value = null
        userAvatarURL.value = unLoginImage
      }
    })

    function renderIcon(icon: Component) {
      return () => {
        return h(NIcon, null, {
          default: () => h(icon)
        })
      }
    }

    // const handleSelect = (key: string) => {
    //   switch (key) {
    //     case 'profile':
    //       router.push("/user/profile")
    //       break
    //     case 'workbench':
    //       router.push("/user/userDashboard")
    //       break
    //     case 'logout':
    //       authStore.logout()
    //       router.push("/home")
    //       break
    //     case 'login':
    //       router.push("/user/login")
    //       break
    //     case 'register':
    //       router.push("/user/register")
    //       break
    //     default:
    //       break
    //   }
    // }
    const handleSelect = (key: string) => {
      switch (key) {
        case 'profile':
          router.push("/user/profile")
          break
        case 'workbench':
          router.push("/user/userDashboard")
          break
        case 'admin':
          router.push("/admin/adminDashboard") // 管理员后台的路由
          break
        case 'logout':
          authStore.logout()
          router.push("/home")
          break
        case 'login':
          router.push("/user/login")
          break
        case 'register':
          router.push("/user/register")
          break
        default:
          break
      }
    }


    const loggedInOptions = [
      {
        label: '用户资料',
        key: 'profile',
        icon: renderIcon(UserIcon)
      },
      {
        label: '个人工作台',
        key: 'workbench',
        icon: renderIcon(WorkbenchIcon)
      },
      {
        label: '退出登录',
        key: 'logout',
        icon: renderIcon(LogoutIcon)
      }
    ]

    const loggedOutOptions = [
      {
        label: '登录',
        key: 'login',
        icon: renderIcon(LoginIcon)
      },
      {
        label: '注册',
        key: 'register',
        icon: renderIcon(RegisterIcon)
      }
    ]

    // const dropdownOptions = computed(() => isUserLoggedIn.value ? loggedInOptions : loggedOutOptions)
    const dropdownOptions = computed(() => {
      const options = isUserLoggedIn.value ? [...loggedInOptions] : loggedOutOptions
      if (isAdmin.value) {
        options.unshift({
          label: '管理员后台',
          key: 'admin',
          icon: renderIcon(EditIcon) // 选择合适的图标
        })
      }
      return options
    })



    return {
      dropdownOptions,
      userAvatarURL,
      handleSelect
    }
  }
})
</script>
